<template>
    <div>
    <div class="container "> 
        <h2>收费统计</h2>
        <el-divider></el-divider>
        <el-form    class="form-demo">
            <el-form-item label="统计时段">
          <el-radio-group v-model="form.time">
            <el-radio value="month">月</el-radio>
            <el-radio value="season">季</el-radio>
            <el-radio value="year">年</el-radio>
          </el-radio-group>
        </el-form-item>
         <el-form-item label="查找年份" v-if="form.time!='year'">
          <el-select v-model="form.year" placeholder="选择年份" placement="top-start">
              <el-option
                v-for="year in yearRange"
                :key="year"
                :label="year"
                :value="year" />
              </el-select>
        </el-form-item>
        <el-row v-else>
            <el-col :span="12">
                    <el-form-item label="开始年份">
                  <el-select v-model="form.startYear" placeholder="选择年份">
                   <el-option
                            v-for="year in yearRange"
                            :key="year"
                            :label="year"
                            :value="year">
                            </el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="结束年份">
                  <el-select v-model="form.endYear" placeholder="选择年份">
                    <el-option
                            v-for="year in yearRange"
                            :key="year"
                            :label="year"
                            :value="year"
                            :disabled="year < form.startYear">
                            </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>

     
        <el-form-item>
          <el-button type="primary" @click="bindConfirm">统计</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
        </el-form>
    </div>
    <div ref="chartDom" style="height: 400px; margin-top: 20px;" class="mt20"></div>

    
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import {statisticsCharge, useYear} from '@/api/statistic'
import * as echarts from 'echarts'
const form  =reactive({
    time:'month',
    year:'2021',
    startYear:'2021',
    endYear:'2024'
})
//动态生成年份
const {yearRange} = useYear()
// 绘制统计图
const chartDom = ref(null)
//绘制课程统计
let chartInstance =ref(null)
const option = reactive({
        // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
       title: {
            text: ''
        },
        tooltip: {},
        legend: {
            data: ['收费']
        },
        xAxis: {
            name: "月",
            data: []  //["1月","2月","3月","4月","5月","6月"]
        },
        yAxis: {
            name: "收费金额"
        },
        series: [{
            name: '收费',
            type: 'bar',
            data: []    //[5, 20, 36, 10, 10, 20]
        }, {
            name: '收费',
            type: 'line',
            data: []     //data: [5, 20, 36, 10, 10, 20]
        }
        ]
    })
 onMounted(async () => {
    await nextTick(); // 确保DOM已经渲染完成
    chartInstance= echarts.init(chartDom.value);
})   
// 销毁ECharts实例
onUnmounted(() => {
    if (chartInstance != null && chartInstance.dispose) {
        chartInstance.dispose();
    }
})
const  bindConfirm =()=>{
    //展示统计的列表
    //按照年月分配
    statisticsCharge(form).then(res=>{
        console.log(res)
        const info  = res.data.data
        option.title.text = info.title;
        option.xAxis.data = info.time;
        option.xAxis.name = info.xname;
        option.series[0].data = info.data;
        option.series[1].data = info.data;
        chartInstance.setOption(option)
    }) 
}
//取消按钮
const cancel=()=>{
    form.year="2021"
    form.time="month"
    chartInstance.dispose()
}
</script >
<style lang="less" scoped>
.form-demo{
    width: 70%;
    padding-left: 10%;
}
.form-demo .el-select{
    width:200px;
}
</style>

